<template>
  <div>
    <el-card class="card">
      <div slot="header">
        <el-button type="primary" @click="addAddress">新增</el-button>
      </div>
      <div>
        <el-table :data="addressList" border>
          <el-table-column
            fixed="left"
            type="index"
            label="#"
            width="50"
            align="center"
          />
          <el-table-column
            prop="addressName"
            label="地址名称"
            width="200"
            align="center"
          />
          <el-table-column label="默认发货地址" width="200" align="center">
            <template slot-scope="scope">
              默认发货地址:<el-switch
                v-model="scope.row.sendStatus"
                :active-value="1"
                :inactive-value="0"
                @change="changeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="收货人姓名"
            width="150"
            align="center"
          />
          <el-table-column
            prop="phone"
            label="收货人电话"
            width="150"
            align="center"
          />
          <el-table-column prop="phone" label="收货人地址" align="center">
            <template slot-scope="scope">
              <p>
                {{ scope.row.province }}
                {{ scope.row.city }}
                {{ scope.row.region }}
              </p>
              <p>
                {{ scope.row.detailAddress }}
              </p>
            </template>
          </el-table-column>
          <el-table-column label="默认收货地址" width="200" align="center">
            <template slot-scope="scope">
              默认收货地址:<el-switch
                v-model="scope.row.receiveStatus"
                :active-value="1"
                :inactive-value="0"
                @change="changeRecive(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="200"
            align="center"
          />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="goEdit(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" size="small" @click="goDelete(scope.row)"
                ><span style="color: red">删除</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog title="地址详情" :visible.sync="open">
      <el-form
        ref="addressForm"
        :model="addressForm"
        :rules="rules"
        :inline="true"
        label-width="150px"
      >
        <el-form-item
          size="mini"
          prop="addressName"
          label="发货地址"
          class="items"
        >
          <el-input
            v-model="addressForm.addressName"
            placeholder="发货地址"
            class="inner-input"
            clearable
          />
        </el-form-item>
        <el-form-item size="mini" label="发货人姓名" class="items">
          <el-input
            v-model="addressForm.name"
            class="inner-input"
            placeholder="发货人姓名"
            clearable
          />
        </el-form-item>
        <el-form-item size="mini" label="发货人手机号" class="items">
          <el-input
            v-model="addressForm.phone"
            class="inner-input"
            placeholder="发货人手机号"
            clearable
          />
        </el-form-item>
        <el-form-item size="mini" label="邮政编码" class="items">
          <el-input
            v-model="addressForm.postCode"
            class="inner-input"
            placeholder="邮政编码"
            clearable
          />
        </el-form-item>
        <el-form-item size="mini" label="收货地址" class="items">
          <el-cascader
            v-model="addressForm.cityCode"
            class="inner-input"
            :options="options"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item size="mini" label="详细地址" class="items">
          <el-input
            v-model="addressForm.detailAddress"
            class="inner-input"
            placeholder="详细地址"
            clearable
          />
        </el-form-item>
        <el-row :gutter="20">

          <el-col :span="12" :offset="0">
            <el-form-item size="mini" label="是否默认发货地址" class="items">
              <el-switch
                v-model="addressForm.sendStatus"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
           <el-col :span="12" :offset="0">
            <el-form-item size="mini" label="是否默认收货地址" class="items">
              <el-switch
                v-model="addressForm.receiveStatus"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="saveAddress">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAddressList,
  setSendOne,
  setReceiveOne,
  companyAddress,
  save,
  update,
  AddressInfo
} from "@/api/address";
import { regionDataPlus, CodeToText } from "element-china-area-data";
export default {
  props: {},
  data() {
    return {
      addressList: [],
      open: false,
      addressForm: {
        addressName: "",
        name: "",
        phone: "",
        postCode: "",
        cityCode: [],
        detailAddress: "",
        receiveStatus: 1,
        sendStatus: 1,
      },
      rules: {
        addressName: [
          { required: true, message: "发货地址不能为空", trigger: "blur" },
        ],
      },
      options: regionDataPlus,
      id:''
    };
  },
  computed: {},
  created() {
    this.init();

  },
  mounted() {},
  watch: {},
  methods: {
    async init() {
      this.addressList = (await getAddressList()).data.items;
      // console.log(this.addressList);
    },
    changeStatus(el) {
      const id = el.id;
      setSendOne({
        id,
      }).then((res) => {
        if (res.success) {
          this.$message.success("修改成功");
          this.init();
        }
      });
    },
    changeRecive(el) {
      const id = el.id;
      setReceiveOne({
        id,
      }).then((res) => {
        if (res.success) {
          this.$message.success("修改成功");
          this.init();
        }
      });
    },
    goDelete(el) {
      const id = el.id;
      this.$confirm("此操作将永久删除该地址, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          companyAddress(id).then((res) => {
            if (res.success) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.init();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    goEdit(el) {
      this.open = true;
      this.id=el.id
      AddressInfo(this.id).then(res=>{
        if (res.success) {
          this.addressForm = {
            ...res.data.address,
            cityCode: res.data.address.cityCode.split(","),
          };
        }
      })
    },
    addAddress() {
      this.open = true;
      this.addressForm.cityCode = [];
      this.addressForm={}
    },
    handleChange(e) {
      this.addressForm.cityCode = e;
      //  console.log(this.addressForm.cityCode)
    },
  saveAddress() {
    // console.log(this.id)
   if(this.id){

     const data = {
        ...this.addressForm,
        cityCode: this.addressForm.cityCode.join(","),
        province: CodeToText[this.addressForm.cityCode[0]],
        city: CodeToText[this.addressForm.cityCode[1]],
        region: CodeToText[this.addressForm.cityCode[2]],
      };
  update(data).then(res=>{
    if(res.success){
      this.$message.success('更新地址成功')
        this.open = false;
          this.init();
           this.addressForm = {};
    }
    })

   }else{
       const data = {
        ...this.addressForm,
        cityCode: this.addressForm.cityCode.join(","),
        province: CodeToText[this.addressForm.cityCode[0]],
        city: CodeToText[this.addressForm.cityCode[1]],
        region: CodeToText[this.addressForm.cityCode[2]],
      };
      save(data).then((res) => {
        if (res.success) {
          this.$message.success("添加地址成功");
          this.open = false;
          this.init();
          this.addressForm = {};
        }
      });
   }


    },
    // goEdit(el){
    //   this.id=el.id
    //   this.open=true
    //   this.addressForm.addressName=el.addressName
    //   this.addressForm.name=el.name
    //  this.addressForm.phone=el.phone
    //  this.addressForm.postCode=el.postCode
    //   this.addressForm.cityCode=el.cityCode.split(',')
    //    this.addressForm.detailAddress=el.detailAddress
    //     this.addressForm.receiveStatus=el.receiveStatus
    //      this.addressForm.sendStatus=el.sendStatus


    // }
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.inner-input {
  width: 300px;
}
.items {
  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
</style>
